<template>
  <div style="width: 100%;">
    <el-text size="small"
      v-if="(mode == '' && type == 'string') || mode == 'text' || (mode == '' && type == 'int') || (mode == 'float' && type == 'float')">
      {{ changeValues ? changeValues : '暂未设置' }}
    </el-text>
    <el-text size="small" v-if="mode == 'single' || mode == 'multi'">
      {{ changeValues ? options[changeValues] : '暂未设置' }}
    </el-text>
    <el-text size="small" v-if="mode == 'judge'">
      {{ changeValues != null ? (changeValues ? '启用' : '禁用') : '暂未设置' }}
    </el-text>
    <div v-if="mode == 'uploadImage'">
      <el-image v-if="limit > 1" v-for="item in changeValues" style="width: 100px; height: 100px" fit="fill"
        :src="item" />
      <el-image v-else style="width: 100px; height: 100px" fit="fill" :src="changeValues" />
    </div>
    <div v-if="mode == 'uploadFile'">
      <div v-for="item in changeValues">
        <el-text> {{ item }} </el-text>
      </div>
    </div>
    <div v-if="mode == 'html'">
      <div v-html="changeValues"></div>
    </div>
    <div class="text-[10px] text-[rgba(151,151,151,0.7)] mb-[10px]">{{ desc }}</div>
  </div>
</template>

<script lang='ts' setup>
import { defineProps, watch, ref } from 'vue';

const emits = defineEmits(['update:modelValues'])
const props = defineProps({
  modelValues: null,
  placeholder: null,
  mode: null,
  type: null,
  options: null,
  desc: null,
  limit: {
    type: Number,
    default: 1
  }
})
const changeValues = ref()
watch(() => props.modelValues, () => {
  changeValues.value = props.modelValues;
}, {
  immediate: true
})
watch(() => changeValues.value, () => {
  // change(changeValues.value)
  emits('update:modelValues', changeValues.value)
}, {
  immediate: true
})
</script>

<style lang='scss' scoped>
</style>
